<template>
  <div class="search-container">
    <a href="./">
      <img class="logo" src="../../../assets/imgs/search/jd_logo.png" alt="京东logo">
    </a>

    <!-- 搜索区域和购物车放在同一行 -->
    <div class="search-and-cart">
      <div class="search-area">
        <div class="search-box">
          <input type="text" placeholder="费列罗巧克力">
          <button class="search-btn">搜索</button>
        </div>
      </div>

      <button class="cart-item">
        <span>我的购物车({{ authStore.isLoggedIn ? cartStore.totalCount : 0 }})</span>
        <i class="iconfont icon-gouwuche"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart';
import { useAuthStore } from '@/stores/auth';
const cartStore = useCartStore();
const authStore = useAuthStore();

</script>

<style scoped lang="scss">
.search-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 15px 20px;
  background: #fff;

  .logo {
    width: 134px;
    height: 42px;
    margin-right: 20px;
    /* 与右侧内容保持距离 */
  }

  /* 新增容器包裹搜索框和购物车 */
  .search-and-cart {
    display: flex;
    align-items: center;
    flex: 1;
    /* 占满剩余空间 */
  }

  .search-area {
    flex: 1;
    /* 搜索区域占满可用空间 */
    min-width: 300px;
    /* 确保搜索框有足够宽度 */
  }

  .search-box {
    display: flex;
    width: 100%;
    /* 改为100%以适应父容器 */
    max-width: 584px;
    /* 保留最大宽度限制 */
    height: 36px;
    border: 2px solid #e4393c;
    border-radius: 4px;

    input {
      flex: 1;
      padding: 0 15px;
      border: none;
      outline: none;
      font-size: 16px;

      &::placeholder {
        color: #999;
      }
    }

    .search-btn {
      width: 100px;
      background: #e4393c;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.9;
      }
    }
  }

  .cart-item {
    background-color: rgb(249, 249, 249);
    width: 140px;
    height: 35px;
    border: 1px solid #DFDFDF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background-color: #f0f0f0;
    }

    span {
      font-size: 12px;
      color: #f30213;
    }

    i {
      color: #f30213;
    }
  }
}
</style>
